<template>
	<view class="container"> 
		<!-- 内容 -->
		<view class="content">
			<view class="changePro">
				<u-dropdown>
					<u-dropdown-item v-model="value" :title="value" :options="options1" @change="changePro(value)"></u-dropdown-item>
				</u-dropdown>
			</view>
			 
			<view class="warning"> 
				<view class="warnPro"> 
					<u-icon name="list" color="#2979ff" size="28" @click="warnMsg()"></u-icon>
				</view>
			</view>
			<view class="circle">
				<canvas style="width: 200px;height: 200px;"  canvas-id="circle" id="circle"></canvas> 
				<view class="energyView">
					<p class="energyP">{{energySum}} kw.h</p>
					<p class="useEnergy">用电量</p>
				</view>
			</view>
			<view class="left">
			 	<p>{{ gatewayNum }}</p>
				<p>网关数量</p>
			</view>
			<view class="right">
			 	<p>{{ circuitNum }}</p>
			 	<p>断路器数量</p>
			</view> 
			<!--  -->
			
		</view>
		
		<!-- 网关列表 -->
		<view class="gatewayList">
			<ul> 
				<li class="gatewayLi" v-for="item in gatewayList" @click="gatewaySet(item)">
					<view class="listOne">
						<p>网关名：{{ item.Name}}</p> 
						<p>SN：{{ item.SN }}</p>
					</view>
					<view class="listTwo">
						<p>网关类型:{{ item.DeviceLan }}</p>
						<p>线路数：{{ item.LineSum }}</p> 
					</view> 
				</li> 
			</ul>
		</view>
		
		 
		 
		 
	</view> 
</template>

<script> 
	export default {
		data() {
			return {    
				energySum:"1894.2",
				gatewayNum:"52",
				circuitNum:"391", 
				options:["项目一","项目二","项目三"],
				value: "项目一", 
				options1: [{
						label: '项目一',
						value: "项目一",
					},
					{
						label: '项目二',
						value: "项目二",
					},
					{
						label: '项目三',
						value: '项目三',
					}
				],
				
				index:2,
				project:"项目二",
				gatewayList:[{
					Name:'网关一',
					SN:'J12345678',
					LineSum:"3",
					DeviceLan:'LAN'
				},{
					Name:'网关二',
					SN:'J22345678',
					LineSum:"3",
					DeviceLan:'WIFI'
				},{
					Name:'网关三',
					SN:'J32345678',
					LineSum:"3",
					DeviceLan:'4G'
				}],
				curNow:1
			}
		},
		onReady(){  
			var ctx = uni.createCanvasContext('circle', this);
			// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
			var gradient = ctx.createLinearGradient(0, 0, 130, 0);

			let increase = 0.09;
			let end = (77 / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度
			let current = -Math.PI / 2; // 起始角度
			let timer = setInterval(() => {
				gradient.addColorStop('0', '#00F2FE');
				gradient.addColorStop('1.0', '#4FACFE');
				ctx.setLineWidth(10);
				ctx.setStrokeStyle(gradient);
				ctx.setLineCap('square');
				ctx.beginPath();
				// 参数step 为绘制的百分比
				if (current < end) {
					current = current + increase;
				}
				if (current >= end) {
					current = end;
					clearInterval(timer);
				}
				ctx.arc(100, 100, 70, -Math.PI / 2, current, false);
				ctx.stroke();
				ctx.draw();
			}, 20);
		},
		methods: { 
			// 选择项目
			 changePro(e){
			 	console.log(e,'1111')
			 },
			
			//  告警信息
			warnMsg(){
				console.log("告警信息","跳转到告警页面");
				uni.navigateTo({
					url:"../warning/warning?SN="+this.SN
				})
			},
			//  跳转到网关详情
			gatewaySet(item){
				console.log(item);
				let SN = item.SN;
				let Name = item.Name;
				console.log(SN);
				 
				uni.navigateTo({
					url:"../gatewayDetail/gatewayDetail?SN="+SN+"+&Name="+Name
				}) 
				
			}
			
		},
		
		mounted(){
		 
			
		}
	}
</script>

<style lang="scss" scoped> 
	.container{
		width: 100%;
		height: 100%;
	}
	
	.changePro {
		width: 100px;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	//  中心区域
	.content{
		width: 100%;
		height: 500rpx;
		position: relative;
		background-color: lightgrey;
	} 
	// 告警信息
	.warnPro{
		position: absolute;
		right: 20px;
		top: 0;
	}
	//  - 用电量
	#circle{
		position: absolute;
		top:0;
		top:-20%;
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
	.energyView{
		height: 100px;
		text-align: center;
		position: absolute;
		top:0; 
		bottom: 0;
		right: 0;
		left: 0;
		margin: auto;
	}
	.energyP{
		font-size: 17px;
		font-weight: bold;
	}
	.useEnergy{ 
		font-size: 17px;
		margin-top: 30rpx;
	} 
	// 网关数量  断路器数量
	.left{
		position: absolute;
		left: 28px;
		bottom: 18px;
		text-align: center;
		font-size: 17px;
	}
	.right{
		position: absolute;
		right: 28px;
		bottom: 18px;
		text-align: center;
		font-size: 17px;
	}
	
	.u-dropdown__content__mask{
		opacity: 0;
	}
	 // 项目
	 .dropDown{
		 width: 100px;
		 // height: 100px;
		padding: 5px;
	 }
	 .proLp{
		 margin: 10px;
		 padding: 10px;
	 }
	 //  告警
	 
	 
	 
	 // 网关列表
	 .gatewayList{
		 margin-top: 20px;
	 }
	 .gatewayLi{
		 width: 100%;
		 height: 60px;
		 padding-top: 20px;
	 }
	 ul{
		padding:0;
		margin:0;
		list-style:none; 
		text-align: left;
	 }
	 li{
		padding:0; 
		margin:0;
		list-style:none;
	}
	li:nth-child(odd) {//单 行
			background:lightpink;
	}
	li:nth-child(even) {//双行
		background: lightcyan;
	} 
	 .listOne{
		 // width: 100%;
		 position: absolute;
		 left: 10%;
	 }
	 .listTwo{
	 	// width: 100%;
		position: absolute;
		right: 13%;
	 }
	 
	 
	 
	  
	 
</style>
